<template>
  <div class="scroll-wrapper"  ref="refScroll" @scroll="hScroll">
    <van-pull-refresh v-model="updating" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="article in articlesData"
          :key="article.art_id.toString()"
          :title="article.title"
          @click="$router.push('/article/'+article.art_id.toString())"
        >
          <!-- 自定义标题下方 label 的内容 -->
          <div slot="label">
            我是
            <van-grid
              :border="false"
              :column-num="article.cover.images.length"
              v-if="article.cover.images.length"
            >
              <van-grid-item
                v-for="(url, index) in article.cover.images"
                :key="index"
              >
                <van-image :src="url" lazy-load />
              </van-grid-item>
            <!-- 文字区 -->
            <div class="meta">
              <span>{{ article.aut_name }}</span>
              <span>{{ article.comm_count }}评论</span>
              <span>{{ article.pubdate | relativeTime }}</span>
              <!-- x按钮 -->
              <span class="close" v-if="$store.state.tokenInfo.token" @click.stop="close(article.art_id.toString())">
                <van-icon name="cross"  size=mini></van-icon>
            </span>
            </div>
            </van-grid>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getArticles } from '@/api/article.js'
export default {
  name: 'ArticleList',
  props: {
    channel: {
      // 频道id
      type: Number,
      required: true
    }
  },
  data () {
    return {
      articlesData: [],
      loading: false, // -正在拉取最新数据
      finished: false, // 是否所有的数据全部加载完成
      updating: false, // 是否正在获取最新数据
      Params: {
        // 请求参数
        channel_id: this.channel, // 当前频道id
        timestamp: Date.now(), // ---初始化时间戳为当前时间
        with_top: 1 // --------------默认值
      },
      timer: null
    }
  },
  methods: {
    async onLoad () {
      // 拉取更多数据
      const { data } = await getArticles({ ...this.Params }) // -- 1.获取数据
      this.articlesData.push(...data.results) // ------------------2.将数据添加到数据源列表尾部
      this.Params.timestamp = data.pre_timestamp // ---------------3.保留时间戳
      this.loading = false // -------------------------------------4.数据更新完毕停止加载状态
      if (data.results.length === 0) this.finished = true // ------5.没有更多数据了,此时不会再加载新数据
    },
    async onRefresh () {
      // 拉取最新数据
      const params = { ...this.Params }
      params.timestamp = Date.now() // ----------------------------1.初始化时间戳为最新时间戳
      const { data } = await getArticles({ ...params }) // ------- 2.获取数据
      this.articlesData.unshift(...data.results) // ---------------3.将数据添加到数据源列表头部
      this.updating = false // ------------------------------------4.更新结束
      this.$toast(`更新${data.results.length}条数据`)// ------------5.提示
    },
    close (id) {
      this.$emit('changeMore', id)
    },
    delArticle (id) { // 删除指定文章
      this.articlesData = this.articlesData.filter(item => item.art_id.toString() !== id)
    },
    hScroll () {
      // 监听用户滚动条
      // 保存一下
      // TODO: 防抖处理
      // 对象普通的属性， 不是响应式的数据
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.scrollTop = this.$refs.refScroll.scrollTop
      }, 100)
    }
  },
  mounted () {
  },
  activated () {
    if (this.scrollTop) {
      this.$refs.refScroll.scrollTop = this.scrollTop
    }
  }
}
</script>
<style lang="less" scoped>
.meta {
  display: flex;
  width: 100%;
  .close {
    margin-left: auto;
  }
  span{
    margin-right: 10px;
  }
}

</style>
